<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div>
      <form
        class="ant-form ant-form-vertical"
      >
        <div
          class="ant-form-item ant-form-item-vertical"
        >
          <div
            class="ant-row ant-form-item-row"
          >
            <div
              class="ant-col ant-form-item-label"
            >
              <label
                class=""
                for="checkbox-group"
                title="技术栈"
              >
                技术栈
              </label>
            </div>
            <div
              class="ant-col ant-form-item-control"
            >
              <div
                class="ant-form-item-control-input"
              >
                <div
                  class="ant-form-item-control-input-content"
                >
                  <div
                    class="ant-pro-checkcard-group"
                    id="checkbox-group"
                    style="width: 100%;"
                  >
                    <div
                      class="ant-pro-checkcard ant-pro-checkcard-bordered"
                    >
                      <div
                        class="ant-pro-checkcard-content"
                      >
                        <div
                          class="ant-pro-checkcard-avatar"
                        >
                          <span
                            class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
                          >
                            <img
                              src="https://gw.alipayobjects.com/zos/bmw-prod/2dd637c7-5f50-4d89-a819-33b3d6da73b6.svg"
                            />
                          </span>
                        </div>
                        <div
                          class="ant-pro-checkcard-detail"
                        >
                          <div
                            class="ant-pro-checkcard-header"
                          >
                            <div
                              class="ant-pro-checkcard-header-left"
                            >
                              <div
                                class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                              >
                                Spring Boot
                              </div>
                            </div>
                          </div>
                          <div
                            class="ant-pro-checkcard-description"
                          >
                            通过业界流行的技术栈来快速构建 Java 后端应用
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="ant-pro-checkcard ant-pro-checkcard-bordered"
                    >
                      <div
                        class="ant-pro-checkcard-content"
                      >
                        <div
                          class="ant-pro-checkcard-avatar"
                        >
                          <span
                            class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
                          >
                            <img
                              src="https://gw.alipayobjects.com/zos/bmw-prod/6935b98e-96f6-464f-9d4f-215b917c6548.svg"
                            />
                          </span>
                        </div>
                        <div
                          class="ant-pro-checkcard-detail"
                        >
                          <div
                            class="ant-pro-checkcard-header"
                          >
                            <div
                              class="ant-pro-checkcard-header-left"
                            >
                              <div
                                class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                              >
                                SOFA Boot
                              </div>
                            </div>
                          </div>
                          <div
                            class="ant-pro-checkcard-description"
                          >
                            使用 SOFAStack 中间件来快速构建分布式后端应用
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="ant-pro-checkcard ant-pro-checkcard-bordered"
                    >
                      <div
                        class="ant-pro-checkcard-content"
                      >
                        <div
                          class="ant-pro-checkcard-avatar"
                        >
                          <span
                            class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
                          >
                            <img
                              src="https://gw.alipayobjects.com/zos/bmw-prod/d12c3392-61fa-489e-a82c-71de0f888a8e.svg"
                            />
                          </span>
                        </div>
                        <div
                          class="ant-pro-checkcard-detail"
                        >
                          <div
                            class="ant-pro-checkcard-header"
                          >
                            <div
                              class="ant-pro-checkcard-header-left"
                            >
                              <div
                                class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                              >
                                Node JS
                              </div>
                            </div>
                          </div>
                          <div
                            class="ant-pro-checkcard-description"
                          >
                            使用前后端统一的语言方案快速构建后端应用
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-form-item ant-form-item-vertical"
        >
          <div
            class="ant-row ant-form-item-row"
          >
            <div
              class="ant-col ant-form-item-control"
            >
              <div
                class="ant-form-item-control-input"
              >
                <div
                  class="ant-form-item-control-input-content"
                >
                  <button
                    class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
                    type="submit"
                  >
                    <span>
                      Submit
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </form>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        CheckCard 与 Form 集成说明：
      </h4>
      <ul>
        <li>
          <strong>
            Form.Item
          </strong>
          : 将 CheckCard.Group 包装在 Form.Item 中作为表单控件
        </li>
        <li>
          <strong>
            name
          </strong>
          : Form.Item 的 name 属性用于标识表单字段
        </li>
        <li>
          <strong>
            value
          </strong>
          : CheckCard 的 value 属性作为选项值
        </li>
      </ul>
      <h4>
        Form 相关 Props：
      </h4>
      <ul>
        <li>
          <strong>
            form
          </strong>
          : Form 实例，通过 Form.useForm() 创建
        </li>
        <li>
          <strong>
            onFinish
          </strong>
          : 表单提交完成时的回调函数
        </li>
        <li>
          <strong>
            layout
          </strong>
          : 表单布局方式，'vertical' 表示垂直布局
        </li>
      </ul>
      <h4>
        CheckCard.Group 在表单中的特点：
      </h4>
      <ul>
        <li>
          <strong>
            自动绑定
          </strong>
          : 自动与 Form 的 name 字段绑定
        </li>
        <li>
          <strong>
            值收集
          </strong>
          : 选中的 CheckCard 的 value 会自动收集到表单数据中
        </li>
        <li>
          <strong>
            验证支持
          </strong>
          : 支持 Form 的验证规则
        </li>
        <li>
          <strong>
            样式适配
          </strong>
          : 可以通过 style 属性适配表单布局
        </li>
      </ul>
      <h4>
        Avatar 组件 Props：
      </h4>
      <ul>
        <li>
          <strong>
            src
          </strong>
          : 头像图片地址
        </li>
        <li>
          <strong>
            size
          </strong>
          : 头像尺寸，'large' 表示大尺寸
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>